{extend name="common/layout" /}
{block name="main"}
<div class="el-breadcrumb">
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item>设置</el-breadcrumb-item>
    <el-breadcrumb-item>权限管理</el-breadcrumb-item>
  </el-breadcrumb>
</div>

<el-button type="primary" @click="handleAdd" icon="el-icon-plus">添加</el-button>
<el-select v-model="role_id" placeholder="请选择" @change='init' style="margin-left: 15px;">
  <el-option v-for="item in roleData" :key="item.id" :label="item.name" :value="item.id">
  </el-option>
</el-select>
<div style="margin-top: 15px;">
  <el-table :data="tableData" stripe border style="width: 100%">
    <el-table-column prop="role_name" label="角色" width="180">
    </el-table-column>
    <el-table-column prop="controller" label="允许的控制器" width="180">
    </el-table-column>
    <el-table-column prop="action" label="允许的操作" width="350">
    </el-table-column>
    <el-table-column label="操作" key="slot">
      <template #default="scope">
        <el-button size="mini" type="info" @click="handleEdit(scope.row)" icon="el-icon-edit">编辑</el-button>
        <el-button size="mini" type="danger" @click="handleDelete(scope.row)" icon="el-icon-delete">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div style="margin-top: 15px;">
    <el-pagination background layout="total, prev, pager, next" :total="pageTotal" v-model::current-page="currentPage"
      @current-change="queryTable">
    </el-pagination>
  </div>
</div>

<el-dialog :title="titleContent" v-model="dialogFormVisible">
  <el-form :model="formData" :rules="rules" ref="formData">
    <el-form-item label="角色" :label-width="formLabelWidth" prop="admin_role_id">
      <el-select v-model="formData.admin_role_id" placeholder="请选择">
        <template v-for="item in roleData" :key="item.id">
          <el-option :label="item.name" :value="item.id">
          </el-option>
        </template>
      </el-select>
    </el-form-item>
    <el-form-item label="控制器" :label-width="formLabelWidth" prop="controller">
      <el-input v-model="formData.controller" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="操作" :label-width="formLabelWidth" prop="action">
      <el-input v-model="formData.action" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleSave()">确 定</el-button>
    </span>
  </template>
</el-dialog>
{/block}

{block name="script"}
<script>
  const data = {
    tableData: [],
    dialogFormVisible: false,
    formLabelWidth: '120px',
    formData: {},
    titleContent: '',
    rules: {
      admin_role_id: [{ required: true, message: '请选择', trigger: 'change' }],
      controller: [{ required: true, message: '请输入', trigger: 'blur' }],
      action: [{ required: true, message: '请输入', trigger: 'blur' }],
    },
    role_id: '',
    roleData: [],
    pageTotal: 0,
    currentPage: 1,
  };
  function f() {
    return {
      init: function () {
        let that = this;
        // 解决分页bug
        this.pageTotal = 0;
        if (this.role_id == '') {
          axiosGet("{:url('admin.role/queryRole')}", { 'admin_role_id': this.role_id })
            .then(response => {
              if (response.code == 1) {
                that.roleData = response.data;
                if (response.data.length) {
                  that.role_id = response.data[0].id;
                }
              } else {
                that.$message.error('系统出错了!!!');
              }
            });
        }
        axiosGet("{:url('query')}", { 'admin_role_id': this.role_id }).then(response => {
          if (response.code == 1) {
            that.tableData = response.data;
            that.pageTotal = response.count;
          } else {
            that.$message.error('系统出错了!!!');
          }
        });
      },
      handleEdit(row) {
        this.titleContent = '修改权限'
        this.dialogFormVisible = true;
        this.formData = JSON.parse(JSON.stringify(row));
        if (this.$refs['formData']) {
          this.$refs['formData'].resetFields();
        }
      },
      handleDelete(row) {
        let that = this;
        this.$confirm('是否确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axiosPost("{:url('delete')}", row).then(response => {
            if (response.state == 'success') {
              that.$message.success(response.msg);
              that.dialogFormVisible = false
              that.queryTable(that.currentPage);
            } else {
              that.$message({
                message: response.msg, type: response.state
              });
            }
          });
        }).catch(() => { });
      },
      handleAdd() {
        this.titleContent = '新增权限'
        this.dialogFormVisible = true;
        this.formData = { 'admin_role_id': this.role_id };
        if (this.$refs['formData']) {
          this.$refs['formData'].resetFields();
        }
      },
      handleSave() {
        let that = this;
        let validation = false;
        this.$refs['formData'].validate((valid) => {
          if (valid) {
            validation = true;
          }
        });
        if (validation) {
          axiosPost("{:url('save')}", this.formData).then(response => {
            if (response.state == 'success') {
              that.$message.success(response.msg);
              that.dialogFormVisible = false
              that.queryTable(that.currentPage);
            } else {
              that.$message({
                message: response.msg, type: response.state
              });
            }
          });
        }
      },
      queryTable(val) {
        let that = this;
        axiosGet("{:url('query')}", { 'admin_role_id': this.role_id, 'page': val }).then(response => {
          if (response.code == 1) {
            that.tableData = response.data;
            that.pageTotal = response.count;
          } else {
            that.$message.error('系统出错了!!!');
          }
        });
        this.currentPage = val;
      }
    }
  }
</script>
{/block}